<template>
    <div>
        <h1>人员列表</h1>
        <h3 style="color: red">count组件求和为：{{ sum }}</h3>
        <h3>列表中第一个人的名字是：{{ firstPersonName }}</h3>
        <input type="text" placeholder="请输入名字" v-model="name" />
        <button @click="add">添加</button>
        <button @click="addWang">添加一个姓王的人</button>
        <button @click="addPersonServer">添加一个服务器的人</button>
        <ul>
            <li v-for="person in personList" :key="person.id">
                {{ person.name }}
            </li>
        </ul>
    </div>
</template>

<script>
import { nanoid } from "nanoid";
import { mapActions, mapState, mapGetters } from "vuex";
export default {
    name: "Person",
    data() {
        return {
            name: "",
        };
    },
    computed: {
        ...mapState("personAbout", ["personList"]),
        ...mapState("countAbout", ["sum"]),
        ...mapGetters("personAbout", ["firstPersonName"]),
    },
    methods: {
        add() {
            const personObj = { id: nanoid(), name: this.name };
            this.$store.commit("personAbout/ADD_PERSON", personObj);
            this.name = "";
        },
        addWang() {
            const personObj = { id: nanoid(), name: this.name };
            this.$store.dispatch("personAbout/addPersonWang", personObj);
            this.name = "";
        },
        addPersonServer() {
            this.$store.dispatch("personAbout/addPersonServer");
            this.name = "";
        },
    },
};
</script>
    
<style scoped>
button {
    margin-left: 5px;
}
</style>